<template>
  <div class="limitdivc" v-loading="loding">
    <el-form ref="parkingcostvue" :model="parkingcostvue" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="业主姓名">
            <el-input v-model="owner_name" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="业主车牌号">
            <el-input v-model="parkingcostvue.parkingcost.ownerCar" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="停车位">
            <el-input v-model="parkingcostvue.parkingcost.ownerParkingId" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="停车时长" prop="parkingTime">
            <el-select
              v-model="parkingcostvue.parkingcost.parkingTime"
              
              @change="changetime(parkingcostvue.parkingcost.parkingTime)"
            >
              <el-option-group v-for="group in options3" :key="group.label" :label="group.label">
                <el-option
                  v-for="item in group.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="停车费单价">
            <el-input v-model="parkingcostvue.price" disabled>
              <template slot="append">月/元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="初始停车时间">
            <el-date-picker
              v-model="parkingcostvue.parkingcost.parkingBeginTime"
              disabled
              type="date"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束停车时间">
            <el-date-picker
              v-model="parkingcostvue.parkingcost.parkingEndTime"
              disabled
              type="date"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="总计">
            <el-input v-model="parkingcostvue.parkingcost.parkingTotalCost" disabled>
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-button
      class="buttenstylec"
      type="primary"
      @click="centerDialogVisible = true"
      :disabled="!isyespay"
    >确认缴费</el-button>

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      :show-close="false"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <span>需要注意的是内容是默认不居中的</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>尊敬的业主，您的爱车还没有车库，如若需要请联系物业！</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="toloding">取 消</el-button>
        <el-button type="primary" @click="toloding">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loding:false,
      dialogVisible: false,
      isyespay: true,
      centerDialogVisible: false,
      owner_name: "软件163",
      ownerId: "",
      parkingcostvue: {
        parkingcost: {
          ownerParkingId: "",
          ownerCar: "",
          parkingTime: 6,
          parkingBeginTime: "",
          parkingEndTime: "",
          parkingPrice: "",
          parkingTotalCost: 0
        },
        price: "",
        bool: ""
      },
      options3: [
        {
          label: "快速方案",
          options: [
            {
              value: 12,
              label: "一年"
            },
            {
              value: 6,
              label: "半年"
            }
          ]
        },
        {
          label: "其他方案",
          options: [
            {
              value: 3,
              label: "3个月"
            },
            {
              value: 6,
              label: "6个月"
            },
            {
              value: 9,
              label: "9个月"
            },
            {
              value: 12,
              label: "12个月"
            }
          ]
        }
      ],
      rules: {
        parkingTime: [
          { required: true, message: "请选择时长", trigger: "change" }
        ]
      }
    };
  },
  created() {
    this.owner_name = sessionStorage.getItem("userName");
    this.ownerId = sessionStorage.getItem("userId");
    this.axios
      .post(
        "managecar/parkingcost?ownerId=" + this.ownerId
      )
      .then(res => {
        this.parkingcostvue.parkingcost = res.data.list[0];
        this.parkingcostvue.price = res.data.list[1].price;
        if (
          this.parkingcostvue.parkingcost.ownerParkingId == "" ||
          this.parkingcostvue.parkingcost.ownerParkingId == null
        ) {
          this.isyespay = false;
          this.dialogVisible = true;
        }
        console.log(res);
      })
      .catch(err => {
        console.error(err);
      });
  },
  methods: {
    changetime(key) {
      this.parkingcostvue.parkingcost.parkingTime = key;
      this.axios
        .post(
          "managecar/parkingprice",
          this.parkingcostvue.parkingcost
        )
        .then(res => {
          this.parkingcostvue.parkingcost = res.data.list[0];
          console.log(res);
        })
        .catch(err => {
          console.error(err);
        });
      console.log(this.parkingcostvue.parkingcost.parkingTime);
    },
    toloding(){
      this.loding=true;
      this.dialogVisible=false;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
  },
  components: {}
};
</script>

<style scope>
.buttenstyle {
  position: relative;
  left: 960px;
}
.inputstyle {
  font-size: 25px;
  outline: none;
  text-align: center; /**居中显示 */
}
.divace {
  border: 1px solid rgb(12, 11, 11);
}
.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #ffffff;
}
.grid-content {
  border-radius: 4px; /**角度圆滑*/
  min-height: 36px; /**高度 */
  text-align: center; /**居中显示 */
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.divcenter {
  /* margin: 0 auto; 
  float:left;
  */
  border: 1px solid #f00;
  width: 50%;
}

.divcontent {
  float: left;
  border: 1px solid rgb(12, 11, 11);
}
</style>
